<template>
  <view class="news-detail">
    <!-- 自定义导航栏 -->
    <custom-navbar
      :title="'资讯详情'"
      :background-color="'#FFFFFF'"
	  :showBack="true"
    ></custom-navbar>

    <!-- 资讯内容 -->
    <view class="news-content">
      <view class="header">
        <view class="title">{{ newsInfo.title }}</view>
        <view class="meta">
          <text class="date">{{ newsInfo.date }}</text>
          <text class="views">{{ newsInfo.views }}阅读</text>
        </view>
      </view>

      <view class="cover-image">
        <placeholder-image
          :text="newsInfo.title"
          :height="400"
          :bg-color="newsInfo.bgColor"
        ></placeholder-image>
      </view>

      <view class="content">
        <view class="section">
          <view class="section-title">资讯简介</view>
          <view class="section-content">{{ newsInfo.desc }}</view>
        </view>

        <view class="section">
          <view class="section-title">详细内容</view>
          <view class="section-content">
            <text v-for="(paragraph, index) in newsInfo.content" :key="index">
              {{ paragraph }}
            </text>
          </view>
        </view>

        <view class="section">
          <view class="section-title">相关图片</view>
          <view class="image-list">
            <view
              v-for="(image, index) in newsInfo.images"
              :key="index"
              class="image-item"
            >
              <placeholder-image
                :text="'图片' + (index + 1)"
                :height="300"
                :bg-color="image.bgColor"
              ></placeholder-image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-btn" @click="toggleLike">
        <uni-icons
          :type="isLiked ? 'heart-filled' : 'heart'"
          size="24"
          :color="isLiked ? '#ff9800' : '#999'"
        ></uni-icons>
        <text>{{ isLiked ? "已点赞" : "点赞" }}</text>
      </view>
      <view class="action-btn" @click="share">
        <uni-icons type="redo" size="24" color="#999"></uni-icons>
        <text>分享</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CustomNavbar from "@/components/custom-navbar/index.vue";

// 资讯ID
const newsId = ref("");

// 资讯信息
const newsInfo = ref({
  title: "医学史特展：从古至今的医学发展",
  date: "2024-03-20",
  views: 1234,
  bgColor: "#5a8dee",
  desc: "探索医学发展的历史长河，见证人类智慧的结晶",
  content: [
    "医学史特展将带领观众穿越时空，从远古时期开始，追溯医学发展的历程。展览通过珍贵的文物、文献资料和多媒体展示，生动再现了人类在医学领域取得的重大突破。",
    "从最早的巫医到现代医学，从简单的草药治疗到复杂的手术技术，展览全面展示了医学发展的各个阶段。观众可以了解古代医学家的智慧，感受现代医学技术的进步。",
    "特别值得一提的是，展览还展示了中国医学的发展历程，包括中医、藏医等传统医学的独特魅力。通过对比不同文化背景下的医学发展，让观众对医学有更全面的认识。",
  ],
  images: [
    { bgColor: "#4caf50" },
    { bgColor: "#9c27b0" },
    { bgColor: "#ff9800" },
  ],
});

// 是否已点赞
const isLiked = ref(false);

// 获取资讯ID
onMounted(() => {
  const query = uni.getLaunchOptionsSync().query || {};
  if (query.id) {
    newsId.value = query.id;
    // 根据ID加载资讯信息
    loadNewsInfo();
  }
});

// 加载资讯信息
const loadNewsInfo = () => {
  // 模拟加载数据
  console.log("加载资讯ID:", newsId.value);
};

// 切换点赞状态
const toggleLike = () => {
  isLiked.value = !isLiked.value;
  uni.showToast({
    title: isLiked.value ? "点赞成功" : "已取消点赞",
    icon: "success",
  });
};

// 分享
const share = () => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage", "shareTimeline"],
  });
};
</script>

<style lang="scss" scoped>
.news-detail {
  min-height: 100vh;
  background-color: $uni-bg-color-grey;
  padding-bottom: 120rpx;
}

.news-content {
  background-color: $uni-bg-color;
  padding: $spacer-4;
}

.header {
  margin-bottom: $spacer-4;
}

.title {
  font-size: $uni-font-size-xl;
  font-weight: 500;
  margin-bottom: $spacer-2;
}

.meta {
  display: flex;
  align-items: center;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;

  .date {
    margin-right: $spacer-4;
  }
}

.cover-image {
  width: 100%;
  height: 400rpx;
  margin-bottom: $spacer-4;
  border-radius: $uni-border-radius-lg;
  overflow: hidden;
}

.section {
  margin-bottom: $spacer-6;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-title {
  font-size: $uni-font-size-lg;
  font-weight: 500;
  margin-bottom: $spacer-3;
}

.section-content {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  line-height: 1.8;

  text {
    display: block;
    margin-bottom: $spacer-3;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.image-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: $spacer-3;
}

.image-item {
  border-radius: $uni-border-radius-base;
  overflow: hidden;
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  background-color: $uni-bg-color;
  display: flex;
  align-items: center;
  padding: 0 $spacer-4;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: $spacer-4;

  text {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;
    margin-top: 4rpx;
  }
}
</style>
